<template>
  <div>
    <div class="dashboard-container">
      <div class="dashboard-text">用户名:{{ name }}</div>
      <div class="dashboard-text">用户角色:<span v-for="role in roles" :key="role">{{ role }}</span></div>
      <!-- 添加六个按钮 -->
      <div class="dashboard-buttons">
        <!-- 第一行按钮 -->
        <div class="dashboard-button-row">
          <router-link :to="'/recruitment/list'">
            <div class="el-button" >在招聘中的岗位: {{ recruitmentPositions }}</div>
          </router-link>
          <router-link :to="'/application/leavelist'">
            <div class="el-button">待处理的请假数量: {{ leaveRequests }}</div>
          </router-link>

          <router-link :to="'/flea/list'">
            <div class="el-button" >在销售的商品: {{ secondhandGoods }}</div>
          </router-link>
        </div>
        <!-- 第二行按钮 -->
        <div class="dashboard-button-row">
          <router-link :to="'/course/list'">
            <div class="el-button" >已发布课程数量: {{ publishedCourses }}</div>
          </router-link>


          <router-link :to="'/application/studentlist'">
            <div class="el-button">学生数量总数: {{ totalStudent }}</div>
          </router-link>

          <router-link :to="'/application/usrlist'">
            <div class="el-button" >最近一个月新增用户: {{ newUsersInLastMonth }}</div>
          </router-link>


        </div>
      </div>
    <!--折线图容器-->
      <div ref="lineChart" >   <chart /></div>
      <!-- 扇形图图容器 -->
      <div ref="pieChart" style="width: 600px; height: 400px;margin-left: 600px;margin-top: -400px"> </div>



    </div>


  </div>

</template>

<script>
  import {mapGetters} from 'vuex';
  import index from "@/api/acl/index";
  import recruit from "@/api/recruit/recruitment";
  import goods from "@/api/flea/goods";
  import ucenter from "@/api/ucenter";
  import  student from"@/api/application/student";
  import course from "@/api/edu/course";
  import leave from "@/api/application/leave";
  import chart from "./chart";
  import * as echarts from 'echarts';



  export default {
    components: {
      chart,
    },

    name: 'Dashboard',

    data() {
      return {


        userInfo: [],
        newUsersInLastMonth:"",
        totalStudent:"",
        publishedCourses:"",
        secondhandGoods:"",
        leaveRequests:"",
        recruitmentPositions:"",

      }
    },

    created() {
      this.getInfo();

    },

    computed: {
      ...mapGetters([

        'name',
        'roles'
      ]),


    },





    methods: {
      async getInfo() {
        try {
          // 使用 Promise.all() 并行获取所有数据
          await Promise.all([
            index.getUserInfo().then(response => {
              const name = response.data.name;
            }),
            recruit.getCount().then(response => {
              this.recruitmentPositions = response.data.count;
            }),
            goods.getCount().then(response => {
              this.secondhandGoods = response.data.count;
            }),
            ucenter.getCount().then(response => {
              this.newUsersInLastMonth = response.data.count;
            }),
            student.getCount().then(response => {
              this.totalStudent = response.data.count;
            }),
            course.getCount().then(response => {
              this.publishedCourses = response.data.count;
            }),
            leave.getCount().then(response => {
              this.leaveRequests = response.data.count;
            })
          ]);

          // 所有数据获取完成后再初始化图表
          this.initPie();
        } catch (error) {
          console.error('数据获取失败:', error);
        }
      },

      initPie()
      {        // 扇形图
        const chart = echarts.init(this.$refs.pieChart);
        const pieChartOption = {
          title: {
            // text: '网站数据',
          },
          tooltip: {},
          legend: {
            // data: ['销量'],
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: '55%',
              data: [
                {value: this.recruitmentPositions, name: '在招聘中的岗位'},
                {value: this.leaveRequests, name: '待审批请假'},
                {value: this.secondhandGoods, name: '在售二手商品'},
                {value: this.publishedCourses, name: '已发布的课程'},
                {value: this.totalStudent, name: '学生总数'},
                {value: this.newUsersInLastMonth, name: '新增用户'},

              ],
            },
          ],
        };
        chart.setOption(pieChartOption);
      }



    }


  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }

  }

  .dashboard-buttons {
    margin-left: 400px;
    margin-top: -70px;

    .el-button {
      width: 200px; /* 设定按钮的固定宽度 */
      margin-right: 50px; /* 按钮之间的间距 */
      margin-bottom: 10px;
    }


  }

</style>
